<template>
  <div class="chatsRecords-container">
    <v-list two-line>
      <v-list-item
        v-for="record in syncedRecords"
        :key="record.id"
        class="align-start"
        :class="{
          self: record.isSelf,
          'justify-end': record.isSelf,
        }"
      >
        <v-list-item-avatar
          class="avatar"
          min-width="32"
          width="32"
          height="32"
        >
          <v-img
            v-if="!record.isSelf"
            src="https://cdn.vuetifyjs.com/images/lists/1.jpg"
          ></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title
            class="text-left chats-text mb-1"
            v-text="record.text"
          >
          </v-list-item-title>
          <v-list-item-subtitle
            class="text-left d-flex justify-space-between subtitle"
          >
            <div>
              <SwitchContent>
                <template #on>
                  <span>Translate</span>
                </template>
                <template #off>
                  <span>Original text</span>
                </template>
              </SwitchContent>
            </div>
            <div>
              <span class="time" v-text="record.time"></span>
              <v-icon class="read-icon" v-if="record.read">mdi-check</v-icon>
            </div>
          </v-list-item-subtitle>
        </v-list-item-content>
        <v-list-item-avatar
          class="avatar"
          min-width="32"
          width="32"
          height="32"
        >
          <v-img v-if="record.isSelf" :src="selfAvatar"></v-img>
        </v-list-item-avatar>
      </v-list-item>
    </v-list>
    <v-card color="#7B8399" flat class="message-warp rounded-0 py-3 px-2">
      <v-row no-gutters>
        <v-col>
          <v-text-field
            rounded
            solo
            hide-details
            class="white-input"
            placeholder="Type message"
          ></v-text-field>
        </v-col>
        <v-col class="flex-grow-0">
          <v-btn color="#EB9B31" fab class="send-btn ml-2">
            <v-icon class="send-icon">mdi-send</v-icon>
          </v-btn>
        </v-col>
      </v-row>
    </v-card>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import SwitchContent from "./SwitchContent.vue";
interface IRecordItem {
  id: string;
  text: string;
  time: string;
  isSelf: boolean;
  read: boolean;
}
@Component({
  components: {
    SwitchContent,
  },
})
export default class ChatsRecords extends Vue {
  @PropSync("items", { type: Array, default: () => [] })
  syncedRecords!: Array<IRecordItem>;

  get selfAvatar() {
    return this.$store.state.ProjectsStore.selfAvatar;
  }
}
</script>

<style lang="scss" scoped>
@import "./ChatsRecords.scss";
</style>
